<template>
	<view class="fu-p-y-30">
		<demo-desc margin="0 15px 15px">
			此组件可以选择日期和时间的选择器
		</demo-desc>
		
		<fu-cell-group>
			<block v-for="(item,index) in list" :key="index">
				<fu-cell :title="item.name" rightColor="#999999" isLink @click="handleDatetimePicker(index)"></fu-cell>
			</block>
		</fu-cell-group>
		
		<fu-datetime-picker 
			ref="datetimePickerRef1" 
			v-model="value1" 
			mode="datetime" 
			round="20" 
			@confirm="confirm"
			@cancel="cancel"
			@change="change"
			@close="close" />
		<fu-datetime-picker 
			ref="datetimePickerRef2" 
			v-model="value2" 
			mode="date" 
			@confirm="confirm"
			@cancel="cancel"
			@change="change"
			@close="close" />
		<fu-datetime-picker 
			ref="datetimePickerRef3" 
			v-model="value3" 
			mode="year-month" 
			@confirm="confirm"
			@cancel="cancel"
			@change="change"
			@close="close" />
		<fu-datetime-picker 
			ref="datetimePickerRef4" 
			v-model="value4" 
			mode="year" 
			@confirm="confirm"
			@cancel="cancel"
			@change="change"
			@close="close" />
		<fu-datetime-picker 
			ref="datetimePickerRef5" 
			v-model="value5" 
			mode="time" 
			@confirm="confirm"
			@cancel="cancel"
			@change="change"
			@close="close" />
		<fu-datetime-picker 
			ref="datetimePickerRef6" 
			v-model="value6" 
			:filter="filter" 
			mode="date" 
			@confirm="confirm"
			@cancel="cancel"
			@change="change"
			@close="close" />
		<fu-datetime-picker 
			ref="datetimePickerRef7" 
			v-model="value7" 
			mode="date" 
			:formatter="formatter" 
			@confirm="confirm"
			@cancel="cancel"
			@change="change"
			@close="close" />
		<fu-datetime-picker 
			ref="datetimePickerRef8" 
			mode="datetime" 
			:minDate="1587524900000" 
			:maxDate="1893470500000" 
			:closeOnClickOverlay="false" 
			@confirm="confirm"
			@cancel="cancel"
			@change="change"
			@close="close" />
		<fu-datetime-picker
			ref="datetimePickerRef9" 
			title="选择日期"
			mode="date" 
			:closeOnClickOverlay="false" 
			@confirm="confirm"
			@cancel="cancel"
			@change="change"
			@close="close" />
	</view>
</template>

<script setup>
	import { getCurrentInstance, ref } from 'vue';
	import { onReady } from '@dcloudio/uni-app';
	
	// data数据
	const instance = getCurrentInstance();
	const { $fu } = instance.appContext.config.globalProperties;
	let value1 = ref(Number(new Date()));
	let value2 = ref(Number(new Date()));
	let value3 = ref(Number(new Date()));
	let value4 = ref(Number(new Date()));
	let value5 = ref('05:25');
	let value6 = ref(Number(new Date()));
	let value7 = ref(Number(new Date()));
	let value8 = ref(Number(new Date()));
	let value9 = ref(Number(new Date()));
	const datetimePickerRef1 = ref();
	const datetimePickerRef2 = ref();
	const datetimePickerRef3 = ref();
	const datetimePickerRef4 = ref();
	const datetimePickerRef5 = ref();
	const datetimePickerRef6 = ref();
	const datetimePickerRef7 = ref();
	const datetimePickerRef8 = ref();
	const datetimePickerRef9 = ref();
	
	const list = ref([
		{ name: '完整日期时间', datetimePickerRef1 },
		{ name: '年月日', datetimePickerRef2 },
		{ name: '年月', datetimePickerRef3 },
		{ name: '年', datetimePickerRef4 },
		{ name: '时间', datetimePickerRef5 },
		{ name: '过滤器(保留偶数年)', datetimePickerRef6 },
		{ name: '格式化', datetimePickerRef7 },
		{ name: '限制最大最小值', datetimePickerRef8 },
		{ name: '设置标题', datetimePickerRef9 }
	]);
	
	// methods方法
	const handleDatetimePicker = (index) => {
		value1.value = Number(new Date());
		list.value[index][`datetimePickerRef${index + 1}`]?.open()
	};
	
	const change = (e) => {
		console.log('change', e)
	};
	
	const close = () => {
		console.log('close');
	};
	
	const cancel = () => {
		console.log('cancel');
	};
	
	const confirm = (e) => {
		console.log('confirm', e);
		result(e.value, e.mode)
	};
	
	const result = (time, mode) => {
		switch (mode) {
			case 'datetime':
				return $fu.toast($fu.formatTime(time / 1000, 'Y-M-D h:m'))
			case 'date':
				return $fu.toast($fu.formatTime(time / 1000, 'Y-M-D'))
			case 'year-month':
				return $fu.toast($fu.formatTime(time / 1000, 'Y-M'))
			case 'time':
				return $fu.toast(time)
			case 'year':
				return $fu.toast($fu.formatTime(time / 1000, 'Y'))
			default:
				return
		}
	};
	
	// 格式化
	const formatter = (type, value) => {
		if (type === 'year') {
			return `${value}年`
		}
		if (type === 'month') {
			return `${value}月`
		}
		if (type === 'day') {
			return `${value}日`
		}
		return value
	};
	
	// 过滤器
	const filter = (type, options) => {
		if (type === 'year') {
			return options.filter((option) => option % 2 === 0)
		}
		return options;
	};
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}
</style>